<template>
    <div>
        御剑乘风来,除魔天地间!{{ $store.state.count }}<br>{{ count }}{{ name }}<br>
        <button @click="add">+10</button>
        <button @click="addCount">-10</button>
        <button @click="syncadd">+异步</button>
        <button @click="moduleHandle">name</button>
        {{ total }}
    </div>
</template>


<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
    data() {
        return {

        }
    },
    created() {
        console.log(this);
    },
    computed: {
        count() {
            return this.$store.state.count
        },
        ...mapState(['count', 'name']),
        ...mapGetters(['total'])
    },
    methods: {
        add() {
            console.log(this);
            this.$store.commit('addHand')
        },
        ...mapMutations(['addCount']),
        ...mapActions(['syncHandle']),
        syncadd() {
            this.syncHandle(2)
        },
        moduleHandle() {
            console.log(this);
            this.$store.commit('user/addHand')
        }
    }
}
</script>
<style lang='less'  scoped></style>
